import React from 'react';
import { Link } from 'react-router';
import qs from 'querystring';
import { connect } from 'react-redux';
import { Icon, Layout, Modal } from 'antd';
import styles from './style.css';
import { getCategory } from '../../actions/categoryAction';
import { getInfoByUid } from '../../actions/homeAction';
import Menus from './menus';
import 'rc-menu/assets/index.css';
const { Header, Content, Footer } = Layout;

const confirm = Modal.confirm;

@connect(state => ({
  category: state.admin.category,
  my: state.home.my,
}), { getCategory, getInfoByUid, })
export default class extends React.Component {
  constructor(props) {
    super(props);
    this.logout = this.logout.bind(this);
  }

  async componentDidMount() {
    document.title = '个人中心 - 中正（深圳）投资有限公司';
    const { getCategory, getInfoByUid } = this.props;

    const seprator = location.hash.indexOf('?');
    const querystring = location.hash.slice(seprator + 1);
    const { uid } = qs.parse(querystring);

    const user = localStorage.getItem('user-1');

    let id;

    try {
      id = JSON.parse(user).id;
    } catch (err) {
      console.log(err);
    }

    await getCategory();
    await getInfoByUid(uid || id);
  }

  /**
   * 退出登录
   */
  logout() {
    confirm({
      title: '',
      content: '确认退出登录吗？',
      okText: '退出',
      cancelText: '取消',
      onOk() {
        localStorage.clear();
        location.replace('#/login?type=1');
      },
      onCancel() {
      },
    });
  }

  render() {
    const { category, my } = this.props;
    return (
      <Layout>
        <Header style={{
          background: '#920003',
          width: '100%',
          height: '90px',
          lineHeight: '90px',
          margin: '0 auto'
        }}>
          <div className={styles.center1200}>
            <Link to={`/`} className={styles.logo}></Link>
            <Menus list={category.list} />
          </div>
        </Header>
        <Content className={styles.container} style={{ flexDirection: 'column' }}>
          <div style={{ display: 'flex', alignItems: 'baseline' }}>
            <div style={{ fontSize: '24px', margin: '10px 0 10px' }}>个人中心</div>
            <div style={{ flex: 1 }}></div>
            <a style={{ display: 'block', margin: '0 0 20px' }} onClick={this.logout}>
               <Icon type="lock" />安全退出
            </a>
          </div>
          <div className={styles.content} style={{ padding: '30px' }}>
            <div dangerouslySetInnerHTML={{ __html: my || '暂无信息。' }}></div>
          </div>
        </Content>
        <Footer className={styles.footer}>
          <a href="http://www.miitbeian.gov.cn/" target="_blank" className={styles.footerLink}>粤ICP备18013179号</a>
          <span style={{ color: '#999', fontSize: '12px', margin: '0 0 0 10px' }}>All Rights Reserved ©2017</span>
          <Link to="/login?type=0" style={{ margin: '0 0 0 10px', fontSize: '12px', color: '#999' }}>管理员登录</Link>
        </Footer>
      </Layout>
    );
  }
}
